<template>
  <div :style="{ height: load ? 'auto' : '100%' }" class="anchor-page">
    <slot v-if="load"></slot>
    <div v-else style="display: flex;justify-content: center;align-items: center;">
      <span class="yu-icon-loading" style="font-size:48px;" title="努力加载中"></span>
    </div>
  </div>
</template>

<script>
import { initLazyIntersectionObserver } from './util.js'
export default {
  name: 'LazyLoader',
  data() {
    return {
      load: false
    }
  },
  beforeDestroy() {
    if (this.observer) {
      this.observer.unobserve(this.$el)
      this.observer = null
    }
  },
  mounted() {
    this.observer = initLazyIntersectionobserver((entry) => {
      if (entry.isIntersecting) {
        this.load = true
        this.observer.unobserve(this.$el)
        this.observer = null
      }
    })
    this.observer.observe(this.$el)
  }
}
</script>